<template>
  <section
    v-if="noteStore.isShowedNote"
    class="note-editor-container absolute top-0 left-0 pt-4 overflow-hidden"
    :style="{
      transform: `translate(${noteStore.notePosition.x}px, ${noteStore.notePosition.y}px)`,
    }"
  >
    <el-input
      type="textarea"
      :rows="4"
      resize="both"
      v-model="noteStore.getCurrentNote.note"
      :ref="(el) => (noteStore.noteEditorRef = el as InputInstance)"
      class="!bg-[#555556] !rounded-2xl"
      @click.stop
      @mouseenter="noteEditorEvents.onNoteEditorMouseEnter"
      @mouseout="noteEditorEvents.onNoteEditorMouseOut"
      @focus="isFocusNoteEditor = true"
      @blur="isFocusNoteEditor = false"
    ></el-input>
  </section>
</template>

<script setup lang="ts">
import type { InputInstance } from "element-plus";
import { noteEditorEvents } from "../../eventHandlers";
import { isFocusNoteEditor } from "../../state";
import { useNoteStore } from "@/store/modules/note";
const noteStore = useNoteStore();
</script>

<style scoped lang="scss">
:deep(.el-textarea) {
  .el-textarea__inner {
    border-radius: 16px;
  }
}
</style>
